<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
    width: 100px;
    height: 100px;
    background-color: pink;
}
</style>
</head>
<body>
    
<div class="box"></div>

<script>
/* // mousewheel 鼠标滚轮事件（谷歌 IE）
document.onmousewheel = function (){
    console.log( '滚轮事件。。。1' );
}

// DOMMouseScroll 鼠标滚轮事件（火狐）
document.addEventListener('DOMMouseScroll',function (){
    console.log( '滚轮事件。。。2' );
}) */


 /**
         * mousewheel 鼠标滚轮事件（谷歌 IE）
         * dom 0级事件注册  onmousewheel
         * e.wheelDelta
         * 前推120  后拉-120
         * 
         * DOMMouseScroll 鼠标滚轮事件（火狐）
         * dom 2级事件注册  addEventListener
         * e.detail
         * 前推-4  后拉4
        */

// 往前推放大box，往后拉缩小box
var box = document.querySelector('.box');

var user_agent = navigator.userAgent.toLowerCase();// 获取用户浏览器信息并转成小写字母
// console.log( user_agent );
if (user_agent.indexOf('firefox') >= 0) {
    // 是火狐浏览器
    document.addEventListener('DOMMouseScroll',function (e){
        console.log( '滚轮事件。。。2', e.detail );// 前推-4  后拉4
        if (e.detail < 0) {
            // 前推，放大
            box.style.width = box.clientWidth + 20 + 'px';
            box.style.height = box.clientHeight + 20 + 'px';
        } else {
            // 后拉，缩小
            box.style.width = box.clientWidth - 20 + 'px';
            box.style.height = box.clientHeight - 20 + 'px';
        }
    })
} else {
    document.onmousewheel = function (e){
        console.log( '滚轮事件。。。1',e.wheelDelta );// 前推120  后拉-120
        if (e.wheelDelta > 0) {
            // 前推，放大
            box.style.width = box.clientWidth + 20 + 'px';
            box.style.height = box.clientHeight + 20 + 'px';
        } else {
            // 后拉，缩小
            box.style.width = box.clientWidth - 20 + 'px';
            box.style.height = box.clientHeight - 20 + 'px';
        }
    }
}

</script>
</body>
</html>